<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="姓名或账户" v-model="listQuery.name"> </el-input>
    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
  </div>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[5,10]" :page-size="listQuery.limit" layout="sizes, prev, pager, next" :total="total"> </el-pagination>
  </div>
  <!-- <el-input class="filter-item" placeholder="姓名或账户" v-model="orgId"> </el-input>-->
	<el-input v-model="orgId" hidden></el-input>
  <el-table :key='tableKey'
  		:data="list"
  		 v-loading.body="listLoading"
  	  border fit highlight-current-row
  	  ref="table"
  	  style="width: 100%">
      <el-table-column align="center" label="序号"  min-width="40%"> <template scope="scope">
        <span>{{scope.$index + 1}} </span>
      </template> </el-table-column>
        <el-table-column align="center" label="id"  > <template scope="scope">
          <span>{{scope.row.id}} </span>
        </template> </el-table-column>
    <el-table-column align="center" label="姓名"> <template scope="scope">
        <span>{{scope.row.name}}</span>
      </template> </el-table-column>
    <el-table-column   align="center" label="账户"> <template scope="scope">
            <span>{{scope.row.username}}</span>
          </template> </el-table-column>
    <el-table-column align="center" label="性别"> <template scope="scope">
            <span>{{scope.row.sex}}</span>
          </template> </el-table-column>
    <el-table-column  align="center" label="操作"> <template scope="scope">
            <el-button  size="small" type="success"
                        @click="HandleAddUser(scope.row)">加入部门
            </el-button>
          </template> </el-table-column>
  </el-table>
  <div class="filter-container mr-tb-10">
  	<span class="el-dialog__title">您目前已选择<span class="">&nbsp;{{selectTotal}}&nbsp;</span>个用户</span>
  	<br>
  	<el-button class="filter-item mr-top-10" v-if="this.isShowAdd"  type="success"  @click="handleAdds">确定已选用户</el-button>
  </div>
  <div class="calendar-list-container selectTableStyle">
	  <el-table :key='tableKey_2'
	  		:data="selectList"
	  		 v-loading.body="seListLoading"
	  	  border fit highlight-current-row
	  	  ref="table_select"
	  	  style="width: 100%">
	    <el-table-column align="center" label="序号"  min-width="40%"> <template scope="scope">
	          <span>{{scope.$index + 1}} </span>
	        </template> </el-table-column>
	         <el-table-column align="center" label="id"  > <template scope="scope">
          <span>{{scope.row.id}} </span>
        </template> </el-table-column>
	    <el-table-column align="center" label="姓名"> <template scope="scope">
	        <span>{{scope.row.name}}</span>
	      </template> </el-table-column>
	    <el-table-column   align="center" label="账户"> <template scope="scope">
	            <span>{{scope.row.username}}</span>
	          </template> </el-table-column>
	    <el-table-column align="center" label="性别"> <template scope="scope">
	            <span>{{scope.row.sex}}</span>
	          </template> </el-table-column>
	    <el-table-column  align="center" label="操作"> <template scope="scope">
	           <el-button  size="small" type="danger"
                   @click="HandleRemoveUser(scope.row)">移出部门
						</el-button>
      </template> </el-table-column>
	  </el-table>
	</div>
</div>
</template>
<script>
import {
  page,
  orgPage,
  delObj,
  addObj,
  addSelectUser
} from 'api/admin/org/user';
import { mapGetters } from 'vuex';
export default {
  name: 'userCheckout',
  props:['orgId'],
  data() {
    return {
    	multipleSelection:[],
    	selectUsers:[],
      list: null,
      total: null,
      listLoading: true,
      selectList:null,
      selectTotal:0,
      seListLoading:false,
      listQuery: {
        page: 1,
        limit: 5,
        name: undefined,
        orgId:this.orgId
      },
      currentPage:null,
      dialogFormVisible: false,
      dialogStatus: '',
      dialogDetailVisible: false,
      currentId: -1,
      tableKey: 0,
      tableKey_2:1,
      isShowAdd:false
    }
  },
  created() {
    this.handleInit();
  },
  watch: {
    orgId(val){
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  mounted(){
  },


  methods: {
    handleInit() {
      this.getList();
      this.getSelectList();
    },
    getList() {
      this.listLoading = true;
      this.listQuery.orgId=this.orgId;
      page(this.listQuery)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        })
    },
    getSelectList() {
      this.seListLoading = true;
      this.listQuery.orgId=this.orgId;
      orgPage(this.listQuery)
        .then(response => {
          this.selectList = response.data.rows;
          this.selectTotal = response.data.total;
          this.seListLoading = false;
        })
    },
    setUserList(){
    	 this.selectList = this.selectUsers;
       this.selectTotal = this.selectUsers.length;
       if( this.selectTotal > 0 ){
       	 this.isShowAdd = true;
       }else{
       	 this.isShowAdd = false;
       }

    },
    handleFilter() {
      this.getList();
    },
    handleAdds(){
    	 this.$confirm('确定添加已选用户，继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var tdata = this.multipleSelection.join(',');
          addSelectUser(this.orgId , tdata)
            .then(() => {
              this.$notify({
                title: '成功',
                message: '设置成功',
                type: 'success',
                duration: 2000
              });
              const index = this.list.indexOf(row);
             	this.list[index].status = toStatus;
            });
        });
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.currentPage = val;
      this.getList();
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    closeUserDialog() {
      this.dialogUserVisible = false;
    }
    ,
    HandleAddUser(row){
      var formData = {
        orgId:0,
        userId:0
      };
      formData.orgId=Number(this.orgId);
      formData.userId=Number(row.id);

      addObj(formData).then(() => {
        this.getList();
        this.$notify({
          title: '成功',
          message: '加入部门成功',
          type: 'success',
          duration: 2000
        });
        this.handleInit();
      });
    },

    HandleRemoveUser(row){
      var formData = {
        orgId:0,
        userId:0
      };
      formData.orgId=Number(this.orgId);
      formData.userId=Number(row.id);
      delObj(formData).then(() => {
        this.getList();
        this.$notify({
          title: '成功',
          message: '移出部门成功',
          type: 'success',
          duration: 2000
        });
        this.handleInit();
      });
    }
    ,
    closeChekcoutUserDialog() {
      this.dialogUserVisible = false;
      this.currentId = -1;
    }
  }
}
</script>
<style scoped>
.selectTableStyle{
	height: 300px;
  overflow-x:hidden;
}
.mr-tb-10{
	margin: 40px 0 10px 0px;
}
.mr-top-10{
	margin-top:10px;
}
.pagination-container{
	margin-top: 5px;
}
</style>
